<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./main.css">
	<title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: fit-content;">
	<!-- playground-fold-end -->
	<ui5-dynamic-page class="page">
		<ui5-dynamic-page-header style="height: 9.375rem;">
			<ui5-shellbar id="shellbar">
				<ui5-shellbar-branding slot="branding">
					Your Application
					<img slot="logo" src="https://ui5.github.io/webcomponents/nightly/images/sap-logo-svg.svg" alt="SAP Logo"/>
				</ui5-shellbar-branding>
				<ui5-avatar slot="profile" id="avatar">
					<img src="https://ui5.github.io/webcomponents/nightly/images/avatars/woman_avatar_3.png" alt="avatar"/>
				</ui5-avatar>
			</ui5-shellbar>
			<ui5-ai-button
				id="myAiButton"
				state="regenerate"
				style="float: inline-end; margin: 1.375rem;"
			>
				<ui5-ai-button-state name="regenerate" text="Regenerate" icon="ai"></ui5-ai-button-state>
				<ui5-ai-button-state name="generating" text="Stop Generating" icon="stop"></ui5-ai-button-state>
			</ui5-ai-button>
		</ui5-dynamic-page-header>

			<div class="content">
				<div class="section">
					<ui5-title level="H1" size="H4">Article 1</ui5-title>
					<ui5-title level="H2" size="H5">Informative Subtitle for Article 1</ui5-title>
					<br />
					<hr />
					<ui5-busy-indicator delay="0" class="busy-indicator" id="ui5BiOutput1">
					<ui5-text id="output1" empty-indicator-mode="" class="output-text">
						Discover the ultimate solution for home organization with our versatile storage bins.
						These durable containers come in various sizes to fit any space, from closets to garages.
						Their stackable design maximizes your storage capacity while keeping your items easily accessible.
						Each bin features a transparent body, allowing you to quickly identify contents without opening them.
						Perfect for seasonal items, toys, or tools, these storage bins are the key to a clutter-free home.
						Start organizing today and enjoy a more spacious and tidy living environment.
					</ui5-text>
					</ui5-busy-indicator>
					<ui5-title level="H1" size="H4">Article 2</ui5-title>
					<ui5-title level="H2" size="H5">Informative Subtitle for Article 2</ui5-title>
					<br />
					<hr />
					<ui5-busy-indicator delay="0" class="busy-indicator" id="ui5BiOutput2">
					<ui5-text id="output2" empty-indicator-mode="" class="output-text">
						Experience the future of cooking with our state-of-the-art smart oven.
						This innovative appliance offers a range of features to enhance your culinary skills, including precise temperature control and multiple cooking modes.
						The smart oven connects to your smartphone, allowing you to monitor and adjust settings remotely.
						With its sleek design and intuitive interface, cooking has never been easier or more enjoyable.
						Whether you're baking, roasting, or broiling, this smart oven ensures perfect results every time.
						Upgrade your kitchen and transform the way you cook.
					</ui5-text>
					</ui5-busy-indicator>
				</div>
			</div>
		</ui5-dynamic-page>

		<ui5-dialog id="dialog" state="Critical" header-text="Warning">
		<ui5-text>
			Regenerating will overwrite all fields with AI-generated content.<br>
			Do you want to continue?
		</ui5-text>
		<ui5-checkbox id="checkbox" style="margin-inline-start: -0.625rem;" text="Don't ask me again"></ui5-checkbox>
		<div slot="footer" class="dialog-footer">
			<ui5-button design="Emphasized" id="dialogProceed">Regenerate</ui5-button>
			<ui5-button id="dialogCloser">Cancel</ui5-button>
		</div>
		</ui5-dialog>
	<!-- playground-fold -->
	<script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->